<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <a href="http:www.baidu.com">2222</a>

    <form action="" method="get">
        <input type="text" name="username"> <span>还剩下6个字符</span>
        <br>
        <input type="password" name="password">
        <br>
        <input type="submit">
    </form>

    <script>

        // e.preventDefault 或者return false 可以阻止默认事件


        // 表单事件
        //    onsubmit  写在form 的事件
        //    onblur  失去焦点
        //    onchange  失去焦点且发生改变
        //    oninput   每一次输入都触发

        // 表单的方法
        //    blur()   失去焦点
        //    focus()  获取焦点


        var oForm = document.querySelector('form') ;
        oForm.onsubmit = function(e) {
            // 阻止表单提交
            // prevent 阻止   default 默认
            // e.preventDefault() ;
            return false ;
        }


        var oA = document.querySelector('a') ;
        oA.onclick = function(e) {
            // e.preventDefault() ;
            return false ;
            
        }

        // document.onclick = function() {
        //     console.log(1);
        // }


        var oUser = document.querySelector('input[type="text"]') ;
        var oSpan = document.querySelector('span') ;
        var oPwd = document.querySelector('input[type="password"]') ;

        // 失去焦点触发
        oUser.onblur = function() {
            console.log(this.value);
        }

        // 失去焦点且发生改变
        // oUser.onchange = function() {
        //     console.log(this.value);
        // }
        
        var n = 6 ;
        oUser.oninput = function() {
            n = 6 - this.value.length ;
            // console.log(this.value);
            if(n <= 0) {
                n = 0 ;
                // 截取前6位
                this.value = this.value.substr(0,6);
                // oPwd.focus() ;
                this.blur() ;
            }
            oSpan.innerHTML = '还剩下' + n + '字符' ;
        }


    </script>
    
</body>
</html>